<template>
  <div class="nav">
      <ul>
          <li v-for="(v,i) in nav" :key="i" @click="fun()">
              <div class="nnaa"><img :src="v.img"></div>
              <p>{{v.name}}</p>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  methods:{
    fun(){
      this.$router.push({name:"all2"})
    }
  },
  data() {
    return {
      nav: [
        { name: "二手房", img: "img/a1.jpg" },
        { name: "新房", img: "img/a2.jpg" },
        { name: "租房", img: "img/a3.jpg" },
        { name: "海外 ", img: "img/a4.jpg" },
        { name: "商铺办公", img: "img/a5.jpg" }
      ]
    }
  }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.nav{
    width: 94%;
    height: .88rem;
    margin: auto;
}
ul{
    width: 100%;
    height: .88rem;
    display: flex;
}
ul li{
    width: 20%;
    height: 100%;
}
.nav li .nnaa{
    width: .55rem;
    height: .37rem;
    margin: .2rem auto .03rem;
}
.nav li .nnaa img{
    width: 100%;
    height: 100%;
}
.nav li p{
    text-align: center;
}
</style>